<script lang="ts" setup>
import { ref, watch } from 'vue'

// const transformStyle = ref({})

const props = defineProps({
    random: {
        type: Number,
        default: 0
    }
})

// const possibility = {
//     1: { x: 45, y: 0, z: -45 },
//     2: { x: 135, y: -45, z: 0 },
//     3: { x: 135, y: 45, z: -90 },
//     4: { x: -45, y: 45, z: 0 },
//     5: { x: -45, y: -45, z: -90 },
//     6: { x: 45, y: 180, z: -45 }
// }

const diceImgMap = {
    1: 'https://cdn.krisli.cn/imgs/dice1.png',
    2: 'https://cdn.krisli.cn/imgs/dice2.png',
    3: 'https://cdn.krisli.cn/imgs/dice3.png',
    4: 'https://cdn.krisli.cn/imgs/dice4.png',
    5: 'https://cdn.krisli.cn/imgs/dice5.png',
    6: 'https://cdn.krisli.cn/imgs/dice6.png'
}

const imgSrc = ref('https://cdn.krisli.cn/imgs/dice1.png')

watch(
    () => props.random,
    (newVal) => {
        // const result = possibility[newVal + 1]
        imgSrc.value = diceImgMap[newVal + 1]
        // transformStyle.value = {
        //     transform: `rotateX(${result.x}deg) rotateY(${result.y}deg) rotateZ(${result.z}deg)`
        // }
    },
    {
        immediate: true
    }
)
</script>

<template>
    <div class="relative dice-box w-16 h-auto">
        <img :src="imgSrc" mode="widthFix" class="w-16 h-16" />
    </div>
</template>

<style lang="less">
.dice-box {
    display: flex;
    justify-content: center;
    align-items: center;
    // transform-style: preserve-3d;
    // transform-origin: center;
    // transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg);
    // transition: all 1s ease-in-out;
}
.dice-1 {
    transform: translateZ(1.5rem);
}
.dice-6 {
    transform: translateZ(-1.5rem);
}
.dice-2 {
    transform: rotateX(90deg) translateZ(-1.5rem);
    transform-origin: center;
}
.dice-4 {
    transform: rotateX(-90deg) translateZ(-1.5rem);
    transform-origin: center;
}
.dice-3 {
    transform: rotateY(90deg) translateZ(-1.5rem);
    transform-origin: center;
}
.dice-5 {
    transform: rotateY(-90deg) translateZ(-1.5rem);
    transform-origin: center;
}
</style>
